<style lang="scss" src="./index.scss" scoped></style>
<template>
    <div class="menu-tree-box">
        <div class="menu-tree__body">
            <el-tree
                :data="treeData"
                show-checkbox
                default-expand-all
                node-key="id"
                ref="treeRef"
                highlight-current
                :default-checked-keys="select"
                @check-change="handleNodeClick"
                :props="defaultProps"
            >
            </el-tree>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Mixins, Prop } from "vue-property-decorator";
import FormMixin from "@/mixins/form.mixin.ts";
@Component({
    model: {
        prop: "value",
        event: "change"
    }
})
export default class MenuTree extends Mixins(FormMixin) {
    @Prop({
        type: Array,
        default: () => {
            return [];
        }
    })
    readonly disabledList!: any[];


    @Prop({
        type: Array,
        default: () => {
            return [];
        }
    })
    readonly value!: any[];

    get select() {
        return this.value;
    }

    set select(val: any) {
        this.$emit("change", val);
    }

    defaultProps = {
        children: "children",
        label: "label"
    };

    treeData: any[] = [];
    // treeData: any[] = [
    //     {
    //         id: 1,
    //         label: "一级 1",
    //         children: [
    //             {
    //                 id: 4,
    //                 label: "二级 1-1",
    //                 children: [
    //                     {
    //                         id: 9,
    //                         label: "三级 1-1-1"
    //                     },
    //                     {
    //                         id: 10,
    //                         label: "三级 1-1-2"
    //                     }
    //                 ]
    //             }
    //         ]
    //     },
    //     {
    //         id: 2,
    //         label: "一级 2",
    //         children: [
    //             {
    //                 id: 5,
    //                 label: "二级 2-1"
    //             },
    //             {
    //                 id: 6,
    //                 label: "二级 2-2"
    //             }
    //         ]
    //     },
    //     {
    //         id: 3,
    //         label: "一级 3",
    //         children: [
    //             {
    //                 id: 7,
    //                 label: "二级 3-1"
    //             },
    //             {
    //                 id: 8,
    //                 label: "二级 3-2"
    //             }
    //         ]
    //     },
    //     {
    //         id: 4,
    //         label: "一级 4",
    //         children: [
    //             {
    //                 id: 9,
    //                 label: "二级 4-1"
    //             },
    //             {
    //                 id: 10,
    //                 label: "二级 4-2"
    //             }
    //         ]
    //     }
    // ];

    selectData: any[] = [];
    roleId = "";
    // select: any[] = [];
    mounted() {
        // this.initData();
    }

    async init(id: any) {
        this.roleId = id;
        this.initData();
    }

    async initData() {
        // 筛选标签
        const response = await this.$server["systemManage/roleManage/menuList"]();
        if (this.responseHasError(response)) {
            return;
        }
        const data = response.data.data || [];
        let treeData: any = this.buildTableData(data);
        if (treeData.length > 0) {
            treeData = [{
                label: "全部",
                id: +new Date(),
                children: treeData
            }];
        }
        this.treeData = treeData;
    }

    buildTableData(list: any) {
        let res: any[] = [];
        if (list.length === 0) {
            return res;
        }
        res = list.map((cur: any) => {
            const _cur: any = {};
            _cur.label = cur.name || "";
            _cur.id = (cur.id || "") + "";
            if (cur.children && cur.children.length > 0) {
                _cur.children = this.buildTableData(cur.children);
            }
            return _cur;
        });
        return res;
    }

    handleNodeClick(item: any) {
        const { id }: any = item;
        if (item.children && item.children.length > 0) return;
        const _index = this.select.findIndex((cur: any) => cur === id);
        if (_index === -1) {
            this.select.push(item.id);
            this.selectData.push(item);
        } else {
            this.select.splice(_index, 1);
            this.selectData.splice(_index, 1);
        }
    }

    handleDataClick(item: any) {
        if (!this.disabledList.includes(item.id)) {
            const treeRef: any = this.$refs.treeRef;
            treeRef.setChecked(item.id);
        }
        // this.select.splice(index, 1);
        // this.selectData.splice(index, 1);
    }

    getTreeRelation() {
        const treeRef: any = this.$refs.treeRef;
        const checkList: any = treeRef.getCheckedNodes(false, true);
        return checkList.slice(1);
    }
}
</script>
